<template>
  <!-- 人工认证，经办人信息比对 -->
  <div class="formDiv">
    <el-form ref="form" size="medium" :model="form" label-width="170px" :rules="rules">
      <el-form-item label="经办人姓名：" prop="handlerName">
        <el-input v-model.trim="form.handlerName" placeholder="请输入经办人姓名" maxLength="20"></el-input>
      </el-form-item>

      <el-form-item label="证件类型：" prop="handlerCertificatesType">
        <el-select v-model.trim="form.handlerCertificatesType" style="width: 100%" placeholder="请选择证件类型">
          <el-option 
            v-for="item in legalRepresentativeTypes" 
            :value="item.dictValue"
            :key="item.dictValue" 
            :label="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="证件号码：" prop="handlerCertificatesNumber">
        <el-input v-model.trim="form.handlerCertificatesNumber" placeholder="请输入证件号码" maxLength="30" @input="form.handlerCertificatesNumber = form.handlerCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
      </el-form-item>

      <el-form-item label="经办人性别：" prop="handlerSex">
        <el-radio-group v-model.trim="form.handlerSex">
          <el-radio v-for="item in sexList" :label="item.dictValue"
            :key="item.dictValue">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="shortMessage" label="手机号码：" prop="handlerPhone">
        <el-input v-model.trim="form.handlerPhone" placeholder="请输入手机号码" :maxlength="11" @input="form.handlerPhone = form.handlerPhone.replace(/[^0-9]/g,'')"></el-input>
      </el-form-item>

      <el-form-item label="验证码：" prop="verCode">
        <div class="codeDiv">
          <el-input v-model.trim="form.verCode" placeholder="请输入验证码" maxLength="6"></el-input>
          <div class="captchaImg">
            <img :src="captchaImage" @click="getCaptchaImage">
          </div>
        </div>
      </el-form-item>

      <el-form-item v-if="shortMessage" label="短信验证码：" prop="code">
        <div class="codeDiv">
          <el-input v-model.trim="form.code" placeholder="请输入短信验证码" maxLength="6"></el-input>
          <div class="sendCodeBtn" @click="sendAuthCode" v-if="textCount < 0">发送验证码</div>
          <div class="cantSendBtn" v-if="textCount >= 0">{{'已发送(' + (textCount < 10 ? ('0' + textCount) : textCount) + '秒)'}}</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="btnDiv">
          <Buttons @submit="submit" :buttons="buttons"></Buttons>
        </div>
      </el-form-item>

      <!-- <el-form-item>
        <div class="btnDiv">
          <div class="btn" @click="submit()">下一步</div>
        </div> 
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
  import config from '@/utils/config.js'
	import {isPhone} from "@/utils/util"
	import {request} from '@/utils/request.js'
  import { getFormOptions } from "@/common/api/logOrReg.js";
  import { getCaptchaImage, verifyAuthCode, getAuthCode } from "@/common/api.js";

  export default {
    props: {
      value: {
        type: Number,
        default: 1
      },
      shortMessage: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        buttons:[{text:"下一步",type:"normal",size:"l",method:"submit"}],
        captchaImage: '',
        realCode: '',
        textCount: -1, //短信倒计时
        form: {
          handlerName: null,
          handlerCertificatesType: null,
          handlerCertificatesNumber: null,
          handlerSex: "0",
          verCode: null,
        },
        rules: {
          handlerName: [
            {required: true, trigger:'blur', message:'请输入经办人姓名'}
          ],
          handlerCertificatesType: [
            { required: true, trigger:'change', message:'请选择证件类型'}
          ],
          handlerCertificatesNumber: [
            {required: true, trigger:'blur', message:'请输入证件号码'}
          ],
          handlerSex: [
            {required: true, trigger:'blur', message:'请选择经办人性别'}
          ],
          verCode: [
            { required:true, trigger:'blur', message:'请输入验证码' },
            { trigger:'blur', validator: (rule, value, callback) => {
                if(value != this.realCode) {
                  callback(new Error('验证码错误'))
                } else {
                  callback()
                }
              }
            }            
          ],
          handlerPhone: [
            {required: true, trigger: 'blur', message: '请输入手机号码'},
            {trigger: 'blur', validator: (rule, value, callback) => {
                if(!isPhone(value)) {
                  callback(new Error('请输入正确的手机号码'))
                } else {
                  callback()
                }
              }
            }
          ],
					code: [
            {required: true, trigger: 'blur', message: '请输入短信验证码'}
          ]
        },
        sexList: [
          {dictLabel: '男', dictValue: '0'},
          {dictLabel: '女', dictValue: '1'}
        ],
        Types: [
          {dictLabel: '类型一', dictValue: '0'},
          {dictLabel: '类型二', dictValue: '1'}
        ],
        legalRepresentativeTypes: []
      }
    },
    mounted() {
      this.getCaptchaImage()
      this.getFormOptions()
    },
    methods: {
      /**
			 * 获取选项信息
			 */
      async getFormOptions() {
        let res = await getFormOptions({})
			  this.legalRepresentativeTypes = res.data.legal_representative_type
			},
      /**
       * 获取图片验证码
       */
      async getCaptchaImage() {
        let res = await getCaptchaImage()
        console.log("res",res)
        this.captchaImage = "data:image/gif;base64," + res.img;
        this.realCode = res.uuid;
      },
      async submit(){
        let ok = false
				this.$refs['form'].validate(valid => {
          if(valid) ok = true;
        })
        if(!ok) return ;
        if(this.shortMessage){
          // 验证手机验证码
          let data = {
              userPhone: this.form.handlerPhone,
              authCode: this.form.code,
              authType: 'register'
          }
          let res = await verifyAuthCode(data)
          if(res.code == 200) {
            localStorage.setItem('preForm', JSON.stringify(this.form))
            this.next()
          } else {
            this.$message.error('验证码错误')
          }
        } else {
          localStorage.setItem('preForm', JSON.stringify(this.form))
          this.next()
        }
      },
      /**
			 * 发送短信验证码
			 */
			async sendAuthCode() {
				let ns = this
				if(!isPhone(ns.form.handlerPhone)) {
					ns.$message.error('手机号码格式不正确')
					return
				}
				let data = {
					userPhone: ns.form.handlerPhone,
					authType: 'register'
				}
        let res = await getAuthCode(data)
        if(res.code == 200) {
          ns.textCount = 120
          var timer = setInterval(counting, 1000)
          function counting() {
            ns.textCount--
            if (ns.textCount < 0) {
              clearInterval(timer)
            }
          }
        } else {
          ns.$message.error(res.msg)
        }
			},
      prev() {
        this.$emit('input', this.value-1)
      },
      next() {
        this.$emit('input', this.value+1)
      }
    }
  }
</script>

<style lang="scss" scoped>
.formDiv {
  margin: 0 auto 100px auto;
  width: 750px;
  text-align: left;
  .agreementDiv:hover {
    cursor: pointer;
    text-decoration: underline;
  }
  .btnDiv {
    display: flex;
    .btn {
      background-color: #f1f2f4;
      color: #045db9;
      margin-right: 20px;
      width: 100px;
      text-align: center;
      font-size: 15px;
      border-radius: 5px;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 5px #888888;
        transition: all 0.2s ease 0s;
      }
    }
  }
  .codeDiv {
    display: flex;
    .el-input {
      margin-right: 10px;
    } 
    .captchaImg {
      width: 120px;
      height: 36px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .sendCodeBtn {
      font-size: 13px;
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-radius: 4px;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 3px #888888;
        transition: all 0.2s ease 0s;
      }
    }
    .cantSendBtn {
      font-size: 13px;
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-radius: 4px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
